<template>
<div id="userlist">
    <!-- 新增用户按钮 -->
    <div>
        <Button type="primary" id="userListAddUser" @click.native="userListAddStaMut">新增用户</Button>
    </div>

    <!-- 新增用户模态框 -->
    <UserListAdd></UserListAdd>

    <!-- 查询表单 -->
    <div>
        <Form inline :label-width="60">
            <FormItem label="部门：">
                <Select>
                    <Option value="">请选择</Option>
                    <Option value="北京">北京</Option>
                    <Option value="上海">上海</Option>
                    <Option value="深圳">深圳</Option>
                </Select>
            </FormItem>
            <FormItem label="账号：">
                <Input placeholder="请输入账号"></Input>
            </FormItem>
            <FormItem label="姓名：">
                <Input @change.native="userListChange" placeholder="请输入姓名"></Input>
            </FormItem>
            <FormItem label="电话：">
                <Input placeholder="请输入电话"></Input>
            </FormItem>
            <FormItem>
                <Button type="primary" @click.native="userListSearch">查询</Button>
            </FormItem>
        </form>
    </div>

    <!-- 表格 -->
    <div id="userlistTable">
        <Table border :columns="userListHead" :data="userListData"></Table>
    </div>

    <!-- 分页 -->
    <div id="userListPage">
        <Page :total="total" @on-change="userListPageChange"></Page>
    </div>

</div>
</template>
<script>
import Vue from 'vue'
import {
    Form,
    FormItem,
    Select,
    Option,
    Input,
    Button,
    Table,
    Page,
    Message
} from 'iview'
Vue.prototype.$Message = Message;

//导入mapActions【使用vuex的mapActions分发】
import {
    mapState,
    mapGetters,
    mapMutations,
    mapActions
} from 'vuex'

//导入新增用户模态框
import UserListAdd from '../../components/UserListAdd'

//解决axios post不能传递参数
import qs from 'qs'

import utils from '../../libs/utils'

export default {
    name: "usrlist",
    data() {
        return {}
    },
    mounted() {
        return this.userListAct;
    },
    computed: {
        userListHead() {
            return [{
                    title: '用户ID',
                    key: 'userid',
                    align: 'center'
                },
                {
                    title: '用户名',
                    key: 'username',
                    align: 'center'
                },
                {
                    title: '创建人',
                    key: 'creater',
                    align: 'center'
                }, {
                    title: '创建时间',
                    key: 'creatertime',
                    align: 'center'
                },
                {
                    title: '修改人',
                    key: 'updater',
                    align: 'center'
                },
                {
                    title: '修改时间',
                    key: 'updatertime',
                    align: 'center'
                },
                {
                    title: '用户身份',
                    key: 'identity',
                    align: 'center'
                },
                {
                    title: '操作',
                    key: 'handle',
                    align: 'center',
                    render: (h, params) => {
                        return h('div', [
                            h('Button', {
                                type: 'Button',
                                class: 'ivu-btn ivu-btn-primary',
                                style: {
                                    marginRight: '5px'
                                },
                                on: {
                                    click: () => {
                                        this.del(params.row.userid);
                                    }
                                }
                            }, '删除')
                        ]);
                    }
                }
            ];
        },
        ...mapState({
            userListName: state => state.userList.userListUserName,
            userListData: state => state.userList.userList,
            current: state => state.userList.userListCurrent,
            pageSize: state => state.userList.userListPageSize,
            total: state => state.userList.userListTotal

        }),
        ...mapActions([
            'userListAct'
        ])
    },
    methods: {
        /**
         * 注意1：mapActions在使用时如果需要传递参数，
         * 需要和需要传递参数的函数放在同一个生命周期内【methods内】
         * 注意2：如果使用vue函数调用mapMutations里面的方法，mapMutations这个函数需要添加()小括号。
         * userListAddUser() {
         *  return this.userListAddStaMut();//注意要触发mapMutations需要给userListAddStaMut添加括号
         * },
         */
        ...mapMutations([
            'userListAddStaMut' //新增用户方法
        ]),
        ...mapActions([
            'userListCurrentAct',
            'userListUserNameAct'
        ]),
        //获取姓名文本框的值
        userListChange(e) {
            return this.userListUserNameAct({
                name: e.target.value
            })
        },

        //查询方法
        userListSearch() {
            return this.userListAct;
        },
        //分页点击跳转方法
        userListPageChange(params) {
            return this.userListCurrentAct({
                newCurrent: params
            });
        },
        //删除列表方法
        del(req) {
            let obj = qs.stringify({
                USERID: req
            });
            this.$axios.post('/user/delete', obj).then((res) => {
                if (res.data.code == '200') {
                    let userListData = this.userListData;
                    for (let i = 0; i < userListData.length; i++) {
                        if (userListData[i].userid == req) {
                            userListData.splice(i, 1);
                        }
                    }
                }
            })
        }

    },
    components: {
        Form,
        FormItem,
        Select,
        Option,
        Input,
        Button,
        Table,
        Page,
        UserListAdd
    }
}
</script>
<style scoped>
#userListAddUser {
    margin-bottom: 20px;
}

#userlistTable {
    width: 100%;
    overflow: hidden;
}

#userListPage {
    text-align: center;
    padding: 20px 0;
}
</style>
